<template>
  <!-- 选项卡 -->
  <div class="_tab">
    <div class="bg-ff _tab_cont">
      <div class="flex" :style="[{'width': tabList.length>3?(tabList.length*width) + '%':''}]">
        <div
          v-for="(item,index) in tabList"
          :key="index"
          :class="['_tab_cur',status==index?'_tab_active':'']"
          :style="[{'padding': `0 ${tabPadding?tabPadding:2}%`}, {'font-size': size},{'width': tabWidth + '%'}]"
          @click="tabChange(index, items?item.id:'')"
        >
          {{items?item.type_name:item}}
          <div v-show="buoy && index == 1" class="_buoy">{{buoy}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 数据
    tabList: {
      type: Array
    },
    // 初始下标
    tabIndex: {
      type: Number
    },
    // 每个元素的宽度
    tabWidth: {
      type: String
    },
    // 字号
    tabSize: {
      type: String
    },
    // 浮标
    tabBuoy: {
      type: Number
    },
    // item名称
    items: {
      type: String
    },
    // 一级id
    one_id: {},
    // padding-lr
    padding: {
      type: String
    }
  },
  data() {
    return {
      list: this.tabList,
      status: this.tabIndex || 0,
      width: this.tabWidth || "25",
      size: this.tabSize || "0.3rem",
      buoy: this.tabBuoy,
      tabPadding: this.padding || 0
    };
  },
  watch: {
    tabList(n) {
      this.list = this.tabList;
    },
    tabIndex(n) {
      this.status = this.tabIndex;
    },
    one_id(n) {
      this.statusChange();
    },
    tabBuoy(n) {
      this.buoy = this.tabBuoy
    }
  },
  mounted() {
    this.statusChange();
  },
  methods: {
    // 点击触发 返回下标
    tabChange(e, id) {
      this.status = e;
      this.$emit("tabChange", this.status, id ? id : "");
    },
    statusChange() {
      if (this.one_id) {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id == this.one_id) {
            this.status = i;
          }
        }
      }
    }
  }
};
</script>


<style scoped>
/* 最新资讯 */

._tab ._tab_cont {
  overflow-x: scroll;
}

._tab_cont::-webkit-scrollbar {
  display: none;
}

._tab_cur {
  height: 0.85rem;
  line-height: 0.85rem;
  color: #999;
  text-align: center;
  position: relative;
  padding: 0 1%;
}

._tab ._tab_active {
  color: #ff0000;
}

._tab_active::after {
  content: "";
  display: block;
  width: 0.48rem;
  height: 0.04rem;
  border-radius: 0.02rem;
  background: #ff0000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
}
/* 浮标 */
._buoy {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #ff0000;
  color: white;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.2rem;
}
</style>